// 导入
import React from 'react';
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// ajax 发起异步请求服务器端数据的过程中和数据返回后，页面渲染的 UI 不同

// 条件
const isLoading = true;

// UI
const loading = <div>数据加载中...</div>;
const success = <div>数据加载成功</div>;

// 使用函数
const loadingFn = () => {
  if (isLoading) {
    return loading;
  } else {
    return success;
  }
};
// 页面
// const page = <div>{loadingFn()}</div>;

// 3元运算符
// 页面
// const page = <div>{isLoading ? loading : success}</div>;

// && 运算符
const page = <div>{isLoading && loading}</div>;

// 渲染
root.render(page);
